// pages/beans/beans.ts
// 引入封装好的 http 模块
const httpService = require('../../utils/beans'); // 根据实际路径修改
Page({
  data: {
    columns: [
      { id: 0, list: [], height: 0 },
      { id: 1, list: [], height: 0 }
    ], // 双列布局

    //一级导航栏----------------------------------------
    tabList: [
      { title: "全部", index: "0", },
      { title: "病害", index: "1", },
      { title: "虫害", index: "2", }
    ],
    //一级导航默认第一个
    tabsId: 0,

    //二级导航栏---------------------------------------
    nav: {  //滚动导航
      list: [
      ],
      active: 0,  //当前选中的导航下标
      left: 0,    //滚动值
      width: 28,
      offsetLeft: 11
    },

    //图片内容-----------------------------------------------------------
    items: {
      list: [
      ]
    },
    currentPage: 1,       // 当前页码
    pageSize: 10,         // 每页数量
    hasMore: true,        // 是否还有更多数据
    loading: false,       // 加载中状态
    baseWidth: 0 // 根据750rpx设计稿计算
  },
  onLoad() {
    this.calculateBaseWidth();
    this.getBeansClassification();
    this.getPestByBidWithPage(1);
  },

  //点击一级tab时触发-----------------------------------------------------------
  switchMainTab(e) {
    const idx = e.currentTarget.dataset.idx;
    this.setData({
      tabsId: idx,
      //'nav.active': 0, // 找到对应二级项
      //'nav.left': 0, // 可选：重置滚动位置
      //'nav.width':28,
      //'nav.offsetLeft':11
    });
  },

  //点击二级tab时触发-----------------------------------------------------------
  //滚动导航 - 选中监听
  select: function (e) {
    console.log('当前导航：', e);
    let _this = this,
      nav = this.data.nav,
      idx = e.currentTarget.dataset.idx,
      width = nav.list[idx].bname.length * 14,
      windowWidth = wx.getWindowInfo().screenWidth,
      offsetLeft = e.target.offsetLeft;

    if (offsetLeft < windowWidth) {
      nav.left = width + 68 - windowWidth + offsetLeft;
    } else {
      nav.left = offsetLeft - windowWidth + width + 68;
    }
    // 更新导航状态前先清空 items.list 和 columns
    _this.setData({
      'items.list': [],
      'columns': [
        { list: [], height: 0 },
        { list: [], height: 0 }
      ],
      currentPage: 1,
      hasMore: true,
      'nav.active' : idx
    }, () => {
      _this.getPestByBidWithPage(1); // 只调用一次
    });
  
    wx.createSelectorQuery().select('.scroll_item' + idx).boundingClientRect((res) => {
      nav.active = idx;
      nav.width = res.width - 20;
      nav.offsetLeft = offsetLeft + 11;
      _this.setData({
        nav: nav,
      });
    }).exec();
  },
  goToDetailPage: function (event: WechatMiniprogram.BaseEvent) {
    const dataset = event.currentTarget?.dataset || {};
    const pid = dataset.pid as string;
    const dataToSend = {
      pid: pid,
      name: dataset.name,
    };
    const queryString = Object.keys(dataToSend).map(key => `${key}=${encodeURIComponent(dataToSend[key])}`).join('&');
    const targetUrl = `/pages/beansDetail/beansDetail?${queryString}`;

    wx.navigateTo({
      url: targetUrl,
      success: function (res) {
        console.log('跳转成功');
      },
      fail: function (err) {
        console.error('跳转失败:', err);
      }
    });
  },

  //测试接口----------------------------------------------------------------
  testGetRequest() {
    httpService.get('Beans/getBeans')
      .then((response) => {
        console.log('GET 请求成功:', response);
      })
      .catch((error) => {
        console.error('GET 请求失败:', {
          error: error.errMsg || error.message,  // 微信错误信息
          stack: error.stack                   // 调用栈
        });
      });
  },

  //获取豆类分类接口--------------------------------------------------
  getBeansClassification() {
    httpService.get('Beans/getBeans')
      .then((response) => {
        this.setData({
          'nav.list': response
        });
      })
      .catch((error) => {
        console.error('GET 请求失败:', {
          error: error.errMsg || error.message,  // 微信错误信息
          stack: error.stack                   // 调用栈
        });
      });
  },

  //通过病虫害分类id获取分类中所有的病虫害并分页--------------------------------------------------------------------
  getPestByBidWithPage(pageNum, pageSize = this.data.pageSize) {
    const bid = this.data.nav.active + 1;
  
    // 如果是第一页，则清空现有的 items 和 columns
    if (pageNum === 1) {
      this.setData({
        'items.list': [],
        'columns': [
          { list: [], height: 0 },
          { list: [], height: 0 }
        ],
        currentPage: 1,
        hasMore: true
      });
    }
  
    const params = {
      pageNum,
      pageSize
    };
    const url = `Pest/getPestByBidWithPage/${bid}`;
  
    this.setData({ loading: true });
  
    httpService.get(url, params)
      .then((response) => {
        // 只有在 pageNum > 1 时才追加数据，否则直接替换
        let updatedItems;
        if (pageNum > 1 && response.list.length > 0) {
          updatedItems = [...this.data.items.list, ...response.list];
        } else {
          updatedItems = response.list;
        }
  
        this.setData({
          'items.list': updatedItems,
          hasMore: Boolean(response.hasNextPage),
          loading: false
        }, () => {
          this.allocateItems2(); // 在 setData 回调中调用布局
        });
      })
      .catch((error) => {
        console.error('请求失败:', error);
        this.setData({ loading: false });
      });
  },

  // 根据设备类型计算基础宽度
  calculateBaseWidth() {
    const systemInfo = wx.getWindowInfo();
    const screenWidth = systemInfo.screenWidth; // 屏幕宽度（px）
    const pixelRatio = systemInfo.pixelRatio;    // 设备像素比

    // 判断设备类型（示例逻辑）
    let deviceType = 'phone';
    if (screenWidth >= 600) { // 平板或大屏设备
      deviceType = 'tablet';
    }

    // 动态设置 baseWidth（根据设计稿比例调整）
    let baseWidth = 345; // 默认值（750rpx设计稿）
    switch (deviceType) {
      case 'tablet':
        baseWidth = screenWidth * 0.4; // 屏幕宽度的40%
        break;
      case 'phone':
        baseWidth = screenWidth * 0.4;
        break;
      default:
        baseWidth = 345; // 保持设计稿基准
    }

    // 转换为 rpx（1px = 750rpx / 设计稿宽度）
    const designWidth = 750; // 设计稿宽度（rpx）
    baseWidth = (baseWidth * 750) / systemInfo.windowWidth;

    this.setData({ baseWidth });
    console.log(baseWidth)
  },
  // 瀑布流分配算法
  allocateItems1() {
    const { items, baseWidth } = this.data;
    const columns = JSON.parse(JSON.stringify(this.data.columns)); // 深拷贝初始列

    items.list.forEach(item => {
      // 计算显示高度
      const displayHeight = (baseWidth * item.height) / item.width;

      // 选择高度较小的列
      const targetColumn = columns[0].height <= columns[1].height ? columns[0] : columns[1];

      // 添加数据并更新列高度
      targetColumn.list.push({
        ...item,
        displayHeight: displayHeight
      });
      targetColumn.height += displayHeight;
    });

    this.setData({ columns });
  },

  // 瀑布流分配算法
  allocateItems2() {
    const { items, baseWidth } = this.data;
    // 每次重新分配前重置 columns
    const columns = [
      { id: 0, list: [], height: 0 },
      { id: 1, list: [], height: 0 }
    ];
  
    items.list.forEach(item => {
      const displayHeight = (baseWidth * item.height) / item.width;
      const targetColumn = columns[0].height <= columns[1].height ? columns[0] : columns[1];
      targetColumn.list.push({ ...item, displayHeight });
      targetColumn.height += displayHeight;
    });
  
    this.setData({ columns });
  },
  onReachBottom() {
    if (!this.data.loading && this.data.hasMore) {
      this.setData(
        {
          currentPage: this.data.currentPage + 1
        },
        () => {
          // 回调中 currentPage 已经更新
          this.getPestByBidWithPage(this.data.currentPage);
        }
      );
    }
  }
}) 